﻿@using mscook.mvc
@model mscook.mvc.Areas.weblogin.Models.BaseModel
<div class="control-group" id="buttonContainer">
    <div class="controls">
        <button id="relatedInfoBtnAdd" type="button" class="btn btn-primary">新增相关列表项</button>
    </div>
</div>
<div class="control-group">
    <table id="relatedInfoTable" class="table table-hover">
        <thead>
            <tr>
                <th>相关内容</th>
                <th>图片</th>
                <th>动作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hide">
                <td>
                    <input name="relatedInfo_id[0]" value="" type="hidden" />
                    <textarea class="span12" rows="2" name="relatedInfo_content[0]"></textarea>
                </td>
                <td>
                    <div class="fileupload fileupload-new" data-provides="fileupload" data-preview="preview[0]">
                        <span class="btn btn-file">
                            <span class="fileupload-new">请选择图片</span>
                            <span class="fileupload-exists">更改图片</span>
                            <input name="relatedInfo_content_image[0]" type="file">
                        </span>
                        <span class="fileupload-preview"></span>
                        <input name="existed_relatedInfo_content_image[0]" value="" type="hidden">
                        <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
                    </div>
                </td>
                <td>
                    <a id="relatedInfoBtnDel" class="btn btn-danger" href="#">
                        <i class="icon-trash icon-white"></i>
                        删除
                    </a>
                </td>
            </tr>

            @for (int i = 0; Model != null && i < Model.RelativeInfos.Count; i++)
            {
                var item = Model.RelativeInfos.ElementAt(i);
                <tr>
                    <td>
                        <input name="@Html.Encode(string.Format("relatedInfo_id[{0}]", (i + 1)))" value="@item.Id" type="hidden" />
                        <textarea class="span12" rows="2"  name="@Html.Encode(string.Format("relatedInfo_content[{0}]", (i + 1)))">@Html.Encode(item.Content)</textarea>
                    </td>
                    <td>
                        <div class="fileupload @(string.IsNullOrEmpty(item.ImagePath) ? "fileupload-new" : "fileupload-exists")" data-provides="fileupload" data-preview="@Html.Encode(string.Format("preview[{0}]", (i + 1)))">
                            <span class="btn btn-file">
                                <span class="fileupload-new">请选择图片</span>
                                <span class="fileupload-exists">更改图片</span>
                                <input name="@Html.Encode(string.Format("relatedInfo_content_image[{0}]", (i + 1)))" type="file">
                            </span>
                            <span class="fileupload-preview">@item.ImagePath</span>
                            <input name="@Html.Encode(string.Format("existed_relatedInfo_content_image[{0}]", (i + 1)))" value="@item.ImagePath" type="hidden">
                            <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
                        </div>
                    </td>
                    <td>
                        <a id="relatedInfoBtnDel" data-id="@item.Id" data-url="@Url.Action("DeleteRelativeInfo", new { id = item.Id })" class="btn btn-danger" href="#">
                            <i class="icon-trash icon-white"></i>
                            删除
                        </a>
                    </td>
                </tr>
            }
            <!--
           2013-11-04 basilwang 不能删除重复模板项
      -->
        </tbody>
    </table>
</div>
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
<script type="text/javascript">
    $(function () {
        $("#relatedInfoBtnAdd").click(function () {
            var tr = $("#relatedInfoTable tbody tr.hide").clone().removeClass("hide");
            var textareaName = "relatedInfo_content";
            var textareaNameSelector = "textarea[name*=" + textareaName + "]";
            var fileInputName = "relatedInfo_content_image";
            var fileInputNameSelector = "input[name*=" + fileInputName + "]";
            var hiddenInputName = "existed_relatedInfo_content_image";
            var hiddenInputNameSelector = "input[name*=" + fileInputName + "]";
            var textAreaLength = $("#relatedInfoTable tbody " + textareaNameSelector).length;
            var index = parseInt($("#relatedInfoTable tbody " + textareaNameSelector)[textAreaLength - 1].name.match(/\d+/g)) + 1;
            tr.find(textareaNameSelector).attr("name", textareaName + "[" + index + "]");
            tr.find(fileInputNameSelector).attr("name", fileInputName + "[" + index + "]");
            tr.find(hiddenInputNameSelector).attr("name", fileInputName + "[" + index + "]");
            $("#relatedInfoTable tbody").append(tr);

        });

        $("body").on("click", "#relatedInfoBtnDel", function () {
            var $this = $(this);
            var id = $this.data("id");
            var url = $this.data("url");
            if (id != null && id != "") {
                var data = jQuery.post(url, "", function () {
                    if (data) {
                        $this.parents("tr").remove();
                    }
                }, "json");

            }
            else {
                $this.parents("tr").remove();
            }
            return false;

        });
    });
</script>
